Ext.namespace('SpeciesObservation');

SpeciesObservation.speciesEntry = function(config) {
	
	this.speciesForm = new SpeciesObservation.speciesForm({
			border: false
		,	region: 'north'
		,	title: 'Species Entry'
		,	autoscroll: true
		,	ref: 'refSpeciesForm'
		,	height: 350
		,	split: true
		,	style: 'background-color: white;'
		,	occurrenceId: ''
		,	dataEntry: true
		,	tbar: [{
				text: 'Sign out'
			,	scope: this	
			,	handler: function(){
					Ext.Ajax.request({
							url: Config.baseUrl + 'resources/api/api.php'
						,	scope: this
						,	params: {
								cmd: 'signout'
							}
						,	success: function(r){
								var record = Ext.decode(r.responseText);
								window.location = Config.baseUrl + 'index.php'; 
							}
						,	failure: function(res){
								window.location = Config.baseUrl + 'index.php';
							}
					});
				}
			},'->',{
					text: 'Get Occurrence Image'
				,	iconCls: 'historicalCard'
				,	scope: this	
				,	handler: function(){
						this.refSpeciesForm.getOccuranceImage();
					}	
			}]
		,	tools: [{
				id: 'help'
			,	scope: this
			,	qtip: 'View Help Documentation'
			,	handler: function(){
					window.open('http://code.google.com/p/species-observations/wiki/dataentry', '_blank');
				}
			}]	
		,	listeners: {
					scope: this
				,	render: function(form){
						form.refSave.text = 'Submit Observation';
						form.refSave.on('click', function(){
							var msg = 'Saving observation...'
							var notice = "Observation Received."	
							if(form.getForm().isValid()){
								form.updateData(form.occurrenceId, 'updateData', msg, notice, form.auth);
								this.refSpeciesForm.getOccuranceImage();
							} else {
								SpeciesObservation.Notice.msg('Notice', 'Please enter required values.');			
							}
						}, this);
						this.refSpeciesForm.refSave.disable();
						this.refSpeciesForm.refFlagCard.show();
						this.refSpeciesForm.refFlagCard.disable();
					}
			}	
	});
	
	var tpl = new Ext.XTemplate(
		'<tpl for=".">',
			'<div class="thumb-wrap">',
			'<div class="thumb noimageavail"><img src="{path}" onerror="this.alt=\'No Image Available.\'"></div>',
			'</div>',
		'</tpl>'
	);

	this.imgStore =  new Ext.data.ArrayStore({
			fields: ['path']
		,	data: []
	}); 
	
	this.panel =  new Ext.DataView({
			region: 'center'
		,	store: this.imgStore
		,	style: 'background-color: white;'
		,	tpl: tpl
		,	emptyText: '<div class="noimageavail">No Image Available.</div>'
		,	listeners: {
				render: function(){
					this.refresh();
				}
			}
	});
	
	Ext.apply(this, config, {
			layout: 'border'	
		,	defaults: {
				autoScroll: true
			}
		,	items:[this.speciesForm, this.panel]
	});

	SpeciesObservation.speciesEntry.superclass.constructor.call(this, config);
};

Ext.extend(SpeciesObservation.speciesEntry, Ext.Viewport, {});